<template>
	<div class="outer" :style="{width:`${width}%`}">
		<div class="title">
				<span class="need" v-if="struc?.must">*</span>
				<span>{{ struc?.viewName }}</span>
		</div>
		<div class="contextPackage">
      <div class="search-head">
        <div class="search">
          <el-input placeholder="请输入内容"  size="mini">
            <template #prepend ><el-icon ><search /></el-icon></template>
          </el-input>
        </div>
        <div class="btns" @click="handlebtn">
          <span><el-icon><plus /></el-icon></span>
        </div>
      </div>
			

			<span class="errorhint"  v-if="showError">{{ struc?.errorHit }}</span>
		</div>
	</div>
</template>

<script lang="ts">
import { Plus, Search } from '@element-plus/icons-vue'
import { computed, defineComponent, onMounted, PropType, reactive, ref, watch } from "vue";
import useDataCheck, { DataStruc } from "../../hook/datastruc";
import useRequet, { RespData } from "../../hook/network"
type Options = {
	id: number,
	name: string
}
export default defineComponent({
	components:{ Plus, Search },
	type: 402,
	name: "TInfo",
	props: {
		struc: Object as PropType<DataStruc>,
		passWidth: {
			type: Number
		}
	},
	setup: (props, context) => {
		let showError = ref(false);
		const request = useRequet({ path: props.struc?.dataSource });
		const options = ref( [] as Options[])
		let selectValue: DataStruc = reactive(props.struc as DataStruc)
		const dataCheck = useDataCheck();
		
		let check = () => {
				if (selectValue.value) {
					showError.value = false;
				} else {
					console.debug("检查出错：",showError);
					showError.value = true;
				}
				
				return !showError.value;
			};

      const handlebtn = () => {
        context.emit('handlebtn')
      }
		// const req = () => {
    //   request.sendRequest({
    //     address: '',
    //     params: {},
    //     success: (resp: RespData) => {
    //       if(resp.code !== 0) return resp.msg
		// 			options.value = resp.data
    //       console.log(resp.data)
    //     },
    //     fail: (resp: RespData) => {
    //       if(resp.code !== 0) return resp.msg
          
    //     },
    //     method: "GET",
    //   })
    // }
    // req()
		
		onMounted(() => {
			dataCheck.addDataCheck(check);
		});
		const width = computed(() => props.passWidth)

		return {showError,check, selectValue, width, options, request, handlebtn}
	},

	methods: {
			out(event: MouseEvent) {
				if(!this.selectValue.must) {
					console.log('判断', this.selectValue.must, this.showError)
					this.showError = false;
				} else {
					console.log('进来了')
					this.check()
				}

		},
	},
});
</script>

<style scoped lang="scss">
@import '@style/extend';
.outer {
	display: flex;
  flex-direction: column;
	margin-bottom: 10px;
	width: 33.333%;
	padding-right: 10px;
	box-sizing: border-box;
	.title {
    padding-bottom: 10px;
		font-size: $fontSize-1;
		color: $regularText;
		.need {
			color: red;
		}
	}

	.contextPackage {
		position: relative;
    .search-head {
      display: flex;
      .search {

      }
      .btns {
        width: 30px;
        line-height: 30px;
        height: 30px;
        background: #e6e3e3;
        text-align: center;
        margin-left: 20px;
        border-radius: $radius-1;
        box-sizing: border-box;
        cursor: pointer;
      }
    }
		.errorhint {
			@extend .error;
			height: 10px;
			display: block;
			line-height: 1;
			position: absolute;
			top: 100%;
		}
	}
}



</style>
